<template>
  <div class="content">
    <!-- 倍率条 -->
    <multiplying-bar :multiplying="UtilsHooks.multiplying" :handle-magnification="UtilsHooks.handleMagnification" />
    <!-- 位置条 -->
    <!-- <div class="content-mouse-positon">{{ mouseString }}</div> -->
    <!-- 大图容器 -->
    <div class="content-viewer-container" id="content-viewer-container">
      <div id="viewer" style="width: 100%; height: 100%"></div>
      <!-- 右键 -->
      <right-menu :eventHooks="EventHooks" v-if="EventHooks.HooksData.rightMenuVisable"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRef, watchEffect, onMounted, onBeforeUnmount, computed, watch } from "vue";
import { useRoute } from "vue-router";
import * as Store from "@/store";
import Bus from "@/utils/bus";
import useInit from "./hooks/useInit";
import useEvents from "./hooks/useEvents";
import useUtils from "./hooks/useUtils";
import { dataInfo } from "./hooks/useInitData";
import MultiplyingBar from "./components/multiplyingBar.vue";
import RightMenu from "./components/rightMenu.vue";
import bus from "@/views/videoLabel/tools/bus";

interface Prop {
  HeaderHooks: Header.HeaderHooks;
  LeftHooks: Left.LeftHooks;
  RightHooks: Right.RightHooks;
  ContentHooks: Content.ContentHooks;
}
const props = defineProps<Prop>();
const route = useRoute();
const id = (route.query.id as unknown) as string;
// 数据回显
const initData = () => {
  // dataInfo.frabicCanvas.skipTargetFind = false;
  // dataInfo.frabicCanvas.selection = true;
  // dataInfo.frabicCanvas.selectionColor = "transparent";
  // dataInfo.frabicCanvas.clear();
  FilmRead.dictionaryData.imageDataList &&
    Object.values(FilmRead.dictionaryData.imageDataList).map((item) => {
      UtilsHooks.getMarkObj(item);
    });
  UtilsHooks.getLocalRuler();
};

const EventHooks = useEvents(props.LeftHooks, initData);
const InItHooks = useInit(EventHooks, initData);
const UtilsHooks = useUtils(initData);
const FilmRead = Store.useFilmRead();
const PicStore = Store.usePicContent();

watchEffect(() => {
  if (dataInfo.isDefault) {
    EventHooks.pictureEvent();
  }
});

onMounted(async () => {
  PicStore.clearState();
  // 先获取当前大图图片的地址
  const res = await InItHooks.getImageUrl(
    +id,
    FilmRead.interfaceData.resultDataList.seriesUid
  );
  if (res.code === 200) {
    dataInfo.imageUrl = res.data.url;
  }
  FilmRead.loading = false;
  await InItHooks.getInfo(dataInfo.imageUrl);
  InItHooks.initCommon(dataInfo.imageUrl);
  props.HeaderHooks.handleRightMenu(document.querySelector(".content"));
  FilmRead.loading = false;
});
// const mouseString = ref("");
// const handleMouseMove = (e: any) => {
//   const point = new OpenSeadragon.Point(e.x, e.y);
//   const imgPoint = dataInfo.viewer?.viewport.windowToImageCoordinates(point)!;
//   mouseString.value =
//     Math.round(imgPoint?.x * 100) / 100 + "," + Math.round(imgPoint?.y * 100) / 100;
// };
Bus.on("toolBarClick", (data: Header.ToolBarItem) => {
  console.log(data, "=======>");
  UtilsHooks.handleToolBar({
    ...data,
    id: props.HeaderHooks.headerHooksData.currentIndex
  });
});
Bus.on("lesionClick", (data: Header.ToolBarItem) => {
  console.log(data, "大图");
  UtilsHooks.handleLesionClick(data)
});
//
const offBusEvent = () => {
  // 防止事件重复
}
onBeforeUnmount(() => {
  offBusEvent()
})
</script>
<style lang="less">
@import url("./content.less");
#div-test {
  background-color: #f40;
  width: 100px;
  height: 100px;
}
.rightmenu-dropdown{
  background-color: #42484c !important;
  border: 1px solid #42484c !important;
  .popper__arrow{
    ::before{
      background: #42484c !important;
    }
  }
  .el-select-dropdown__item{
    color: #fff;
    &.hover{
      background: #5C6871;
    }
  }
}
</style>
